<template>
<div class="icons">
    <swiper :options="swiperOption">
        <swiper-slide v-for="(page,index) of pages" :key=index>
            <div class="icon" v-for="item of page" :key="item.id">
                <div class="icon-img">
                <img class='icon-img-content' :src="item.imgUrl"/>              
                <p class="icon-desc">{{item.desc}}</p>               
            </div> 
            </div>
        </swiper-slide>   
    </swiper>

</div>
</template>

<script>
export default {
    name:'HomeIcons',
    props:{
        list:Array
    },
    data (){
        return{
            swiperOption:{
                autoplay:false
            }
        }
    },
    computed:{
        pages (){
            const pages = []
            this.list.forEach((item,index) =>{
                const page = Math.floor(index / 8)
                if(!pages[page]){
                    pages[page] = []
                }
                pages[page].push(item)
            } )
            return pages
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import '~styles/varibles.styl'
.icons >>> .swiper-container
  height :0
  padding-bottom :50%
.icons
    margin-top:.1rem
.icon 
   height :0
   position relative
   overflow hidden
   width:25%
   float:left
   padding-bottom:25%

.icon-img
   box-sizing:border-box
   padding:.1rem
   position:absolute
   top:0
   left :0
   right :0
   bottom:.44rem

.icon-img-content 
    display :block
    margin: 0 auto
    height:100%
.icon-desc
    left:0
    right:0
    bottom:.44rem
    text-align:center
    line-height :.44rem     
    color:$darkTextColor 
    overflow: hidden
    white-space: nowrap
    ellipsis()
</style>

